<template>
    <div class="calculator">
      <Row>
        <Col span="12">
          <Input v-model="inputA" placeholder="请输入a的值" />
        </Col>
        <Col span="12">
          <Input v-model="inputB" placeholder="请输入b的值" />
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <Button type="primary" @click="calculate">计算</Button>
        </Col>
      </Row>
      <Row>
        <Col span="24">
          <p>计算结果: {{ result }}</p>
        </Col>
      </Row>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import axios from 'axios';
  
  export default {
    setup() {
      const inputA = ref('');
      const inputB = ref('');
      const result = ref('');
  
      const calculate = async () => {
        try {
          const response = await axios.get(`http://localhost:9090/add?a=${inputA.value}&b=${inputB.value}`);
          result.value = response.data.result;
        } catch (error) {
          console.error('请求失败:', error);
          result.value = '请求失败，请检查网络或后端服务';
        }
      };
  
      return {
        inputA,
        inputB,
        result,
        calculate,
      };
    },
  };
  </script>
  
  <style scoped>
  .calculator {
    margin: 20px;
  }
  </style>